<template>
  <div>
    <el-form :model="form" class="w-full">
      <el-form-item v-for="item in props.fields" :key="item.key">
        <!-- 标题 -->
        <div class="w-full"> {{ item.label }} </div>
        <!-- 小型输入框 -->
        <div v-if="item.type == 'input'" class="w-full">
          <el-input
            v-model="form[`${item.key}`]"
            class="w-full"
            type="input"
            :placeholder="item.placeholder"
          />
        </div>
        <!-- 大型文本输入框 -->
        <div class="w-full" v-if="item.type == 'textarea'">
          <el-input
            class="w-full"
            v-model="form[`${item.key}`]"
            :rows="4"
            type="textarea"
            :placeholder="item.placeholder"
          />
        </div>
        <!-- 选择框 -->
        <div class="w-full" v-if="item.type == 'select'">
          <div class="w-full">
            <el-select class="w-full" v-model="form[`${item.key}`]" :placeholder="item.placeholder">
              <el-option
                v-for="(items, index) in item.options"
                :key="index"
                :label="items.name"
                :value="items.value"
              />
            </el-select>
          </div>
        </div>

        <!-- tag标签 -->
        <div class="w-full" v-if="item.type == 'tag'">
          <div class="w-full p-2.5 border border-solid border-zinc-300 rounded">
            <el-tag
              v-for="tag in dynamicTags"
              :key="tag"
              class="mx-1 mb-2 bg-inherit text-black boreder-zinc-300 rounded-md"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              v-if="inputVisible"
              ref="InputRef"
              v-model="inputValue"
              class="ml-1 w-20"
              size="small"
              @keyup.enter="handleInputConfirm(item.key)"
              @blur="handleInputConfirm(item.key)"
            />
            <el-button
              v-else
              class="button-new-tag ml-1 border-dashed rounded-md"
              size="small"
              @click="showInput"
            >
              + 添加
            </el-button>
          </div>
        </div>
      </el-form-item>
      <!-- 标题 -->
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { nextTick, ref } from 'vue'
import { ElInput } from 'element-plus'

const props = defineProps<{
  fields: {
    key: string
    label: string
    required: boolean
    defaultValue: any
    type: string
    placeholder: string
    options?: {
      name: string
      value: string
    }[]
  }[]
}>()
const inputValue = ref('')
const dynamicTags = ref<string[]>([])
const inputVisible = ref(false)
const InputRef = ref<InstanceType<typeof ElInput>>()

const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

const handleInputConfirm = (key: string) => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
    form[key].push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}

// 把传进来的配置生成一个对象
const initForm = props.fields.reduce((prev, field) => {
  prev[field.key] = field.defaultValue
  return prev
}, {})

const form = reactive(initForm)
defineExpose({ form })
</script>
